<template>
  <div class="navseds2">
      <div class="font20 xia">产品中心</div>
      <el-row :gutter="20">
        <el-col :span="12" v-for="(item,index) in tableData" :key="index">
          <router-link :to='"/productdetail?id="+item.id'>
             <el-row :gutter="15">
                <el-col :span="7"><img :src="item.coverImg" width="138" height="138" alt=""></el-col>
                <el-col :span="17">
                  <div class="font24">{{item.productName}}</div>
                  <div class="font14"><div> 引荐 <span>返{{item.yinqian}}%</span></div>  ｜  <div>直签 <span>返{{item.zhiqian}}%</span></div></div>
                  <p>产品介绍：{{item.detail}}</p>
                </el-col>
             </el-row>
          </router-link>
        </el-col>
      </el-row>
        <el-pagination
          @size-change="sizeChange"
          @current-change="currentChange"
          :current-page.sync="page"
          :page-size="pageSize"
          layout=" pager,  total,jumper"
          :total="totalCount">
      </el-pagination>
    </div>
</template>
<script>
import { GetPageOfProductByCompany } from "@/api/product"
export default {
  name: "home",
  data() {
    return {
      message: "",
      currentPage:'5',
      page:1,
      pageSize:6,
      tableData:[],
      totalCount:0
    }
  },
  methods:{
    sizeChange(val) {
      this.pageSize = val
      this.search(1)
    },
    currentChange(val) {
      this.page = val
      this.search(val)
    },
    search(page){
      GetPageOfProductByCompany(
          page,
          this.pageSize
        ).then(res => {
          this.tableData = res.Data
          this.totalCount = res.TotalCount
        })
    }
  },
  created() {
    this.search(1)
  }
}
</script>
<style  rel="stylesheet/scss" lang="scss">
.el-pagination{
  text-align: center;
  .el-pager{
    li{
      margin: 0 4px;
      background: none;
      border: 1px solid #ddd;
      border-radius: 4px;
      &.active{
        background: #24bc5b;
        color: #fff;
        border-color: #24bc5b
      }
    }
  }
  .btn-next{
    margin-left: 4px;
     background: none;
      border: 1px solid #ddd;
      border-radius: 4px;
  }
  .btn-prev{
    margin-right: 4px;
     background: none;
      border: 1px solid #ddd;
      border-radius: 4px;
  }
  .el-pagination__jump{
    margin-left: 0;
  }
  .el-pagination__total{
    margin: 0 14px;
  }
}
.navseds2{
  margin-top: 40px;
  .font20.xia{
    color: #333333;
    font-size: 20px;
    padding-left: 15px;
    position: relative;
    margin-bottom: 20px;
    &::after{
      content: '';
      width: 4px;
      height: 15px;
      background-color: #2f59ab;
      border-radius: 2px;
      position: absolute;
      top: 50%;
      left: 0;
      -webkit-transform: translateY(-50%);
      transform: translateY(-50%);
    }
  }
  .el-col-12{
    margin-bottom: 20px;
    a{
      display: block;
      background-color: #ffffff;
      box-shadow: 0px 0px 8px 0px 
        rgba(43, 61, 86, 0.14);
      border-radius: 5px;
      overflow: hidden;
      padding: 20px;
      box-sizing: border-box;
      .el-col-7{
        width: 154px;
      }
      .el-col-17{
        width: calc(100% - 154px);
        .font24{
          color: #333333;
          font-size: 24px;
          margin-bottom: 15px;
          margin-top: 10px;
        }
        div.font14{
          div{
            display: inline-block;
            margin-right: 12px;
            &:last-child{
              margin-left: 12px;
              margin-right: 0;
            }
          }
          color: #666666;
          span{
            color: #4985e9;
          }
        }
        p{
          font-size: 14px;
          color: #9a9696;
          line-height: 1.6;
          overflow:hidden; 
          display:-webkit-box; 
          -webkit-box-orient:vertical; 
          -webkit-line-clamp:2;
          text-overflow:ellipsis;
           word-break: break-all;
           margin-bottom: 0;
        }
      }
    }
  } 
}
</style>